<template>
  <div class="body">
    <el-tabs v-model="activeTab" @tab-click="handleClick">
      <el-tab-pane label="新歌速递" name="song">
        <div class="tags">
          <el-button round v-for="tag in types" @click="filterSong(tag.type)" :class="{'active':activetag==tag.type}">
            {{ tag.name }}
          </el-button>
        </div>
        <SongTable :table-data="song_list" :height="'calc(100vh - 200px)'"/>
      </el-tab-pane>
      <el-tab-pane label="新碟上架" name="album">
        <div class="tags">
          <el-button round v-for="tag in types" @click="filterAlbum(tag.area)" :class="{'active':activetag==tag.type}">
            {{ tag.name }}
          </el-button>
        </div>
        <AlbumTable :table-data="album_list" v-if="albumload"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="新歌速递">
import { reactive, ref } from "vue";
import type { TabsPaneContext } from 'element-plus'
import api from "@/assets/apis/instance";
import {Song,Album} from "@/assets/apis/MusicDataType";
import util from "@/tools/util";

const activeTab = ref("song");
const activetag = ref(0);
const song_list = reactive<Song[]>([]);
const album_list = reactive<Album[]>([]);
const loading = ref(false);
const albumload = ref(false);

const types = reactive([
  {name:"全部",type:0,area:'ALL'},
  {name:"华语",type:7,area:'ZH'},
  {name:"欧美",type:96,area:'EA'},
  {name:"日本",type:8,area:'JP'},
  {name:"韩国",type:16,area:'KR'}
]);
async function filterSong(type: number) {
  loading.value = true;
  const res = await api.get("/top/song?type=" + type);
  // 创建一个新的数组，存放处理后的歌曲数据
  console.log("新歌列表",res.data)
  const newSongs = res.data.map(songItem => {
      return {
      id: songItem.id,
      name: songItem.name,
      albumPic: util.formatSongsPic(songItem.album.picUrl,100),
      album: songItem.album.name,
      singer: songItem.artists.map(({ name, id }) => ({ name, id })),
      duration: songItem.duration,
      url: songItem.mp3Url,
      fee: songItem.privilege.fee,
      mvId: songItem.mvid,
      publishTime: songItem.album.publishTime
    };
  });
  // 一次性更新 song_list
  song_list.splice(0,song_list.length,...newSongs);
  loading.value = false;
}

async function filterAlbum(area: string) {
  const res = await api.get("/album/new?limit=10&area=" + area);
  console.log("新碟上架", res.albums)
  // 遍历返回的数据
  album_list.push(...res.albums.map(songItem=>{
    id: songItem.id;
    name: songItem.name;
    blurPicUrl: util.formatSongsPic(songItem.blurPicUrl,100);
    artists: songItem.artists.map(obj => obj.name).join(' / ');
  }))
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(JSON.stringify(tab), event)
  if (tab.props.name=="album" && albumload.value===false){
    filterAlbum("ALL")
    albumload.value = true
  }
}
filterSong(activetag.value)
</script>
<style scoped lang="scss">
.body{
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  margin-right: 20px;
  .tags {
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;

    .active {
      background-color: var(--my-bg-menu-active);
    }

    .rotate-icon {
      transform: rotate(180deg);
      transition: transform 0.3s;
    }
  }
}

</style>
